<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
	<link rel="stylesheet" href="../css/index/indexDetail.css">
	<title>原材料介绍</title>
</head>

<body>
	<header>
		<div>
			<div class="left">
				<img src="/images/search.png" alt="">
			</div>
			<div class="middle">
				<img id="logo" src="/images/logo.svg" alt="">
				<div></div>
				<img id="img" src="/images/1912.png" alt="">
			</div>
			<div class="right">
				<p>EN</p>
			</div>
		</div>

	</header>
	<div id="schedule"></div>
	<div class="indexDetail">
		<div class="header" style="background-image: url(../images/coffeehouse1.jpg);">
		</div>
		<div class="content">
			<h1 class="title">咖啡的起源与培植</h1>
			<div class="synopsis">在地理概念上，全球性的咖啡种植区有三个——东非和阿拉伯半岛，东南亚和环太平洋地区，拉丁美洲。</div>
			<div class="article">
				<p>不同地区种植出来的咖啡具有不同的风味——一个国家特别的土壤、气候条件和种植方式使得该国出产的咖啡具有特别的风味。法国的酿酒大师把这种现象叫做“地域风格”。</p>
				<p>在地理概念上，全球性的咖啡种植区有三个——东非和阿拉伯半岛，东南亚和环太平洋地区，拉丁美洲。</p>
				<p>然而，为方便采摘咖啡豆，人们经常通过一些方法来使咖啡树不长那么高。平均而言，一株咖啡树每年所产的咖啡果只够烘焙出0.5公斤的咖啡粉。而对于大多数喜好咖啡的人来说，喝完这些咖啡只需要一个星期的时间！
				</p>
				<p>有两种具有重要经济价值的咖啡：阿拉伯种咖啡豆和东非洲种咖啡豆。在高海拔地区，阿拉伯种咖啡生长得较好，这种咖啡的风味比其它咖啡要精致得多，而且，这种咖啡中咖啡因的含量只占咖啡全部重量的1%。正如其名称所表明的那样，东非洲种咖啡滋味醇厚，抵抗病虫害的能力强，单株产量也很高。该种咖啡生长在低海拔地区，味道苦涩。星巴克公司只采购高品质的阿拉伯种咖啡。
				</p>
				<p>收获季节，咖啡树上长满了鲜红的咖啡果。未经烘焙的咖啡豆只是咖啡果的果核。</p>
				<img src="" alt="">
				<h2>恪尽职守的咖啡树</h2>
				<p>像其它种类的果实一样，咖啡果也生长在树上。土壤、气候、海拔高度、咖啡树周围其它种类的植物都能够对咖啡的风味产生影响。</p>
				<p>咖啡果的皮非常厚，味微苦。而果皮下面的果核却是甜的，其质地与葡萄相似。果核的里层，是对种子起保护作用的薄膜。该层薄膜很像苹果种子的保护膜。去掉这一层膜，你就会看到绿色的咖啡豆—通常为两粒。将咖啡豆洗净之后，就可以进行烘焙了。
				</p>
			</div>
		</div>
		<div class="relate-article">
			<div class="top">
				<img src="../images/relate-article.png" alt="">
				<p>相关文章</p>
			</div>
			<div class="bot row">
				<a class="col-lg-4">
					<img src="../images/bean_01.jpg" alt="">
					<div class="text">
						<img src="../images/relate-article2.png" alt="">
						<p>咖啡烘焙</p>
						<span>更多地体现在我们为使每一颗咖啡豆具有上佳口味而花费的心血上。星巴克烘焙的颜色可以模仿，但它特别的风味却是无法模仿的。</span>
					</div>
				</a>
				<a class="col-lg-4">
					<img src="../images/bc_07.jpg" alt="">
					<div class="text">
						<img src="../images/relate-article2.png" alt="">
						<p>星巴克更高的阿拉比卡标准</p>
						<span>卓越咖啡，源于品质咖啡豆。</span>
					</div>
				</a>
				<a class="col-lg-4">
					<img src="../images/bean_06.jpg" alt="">
					<div class="text">
						<img src="../images/relate-article2.png" alt="">
						<p>咖啡历史</p>
						<span>咖啡的历史与咖啡的酿制方式，有着同样丰富的内容。它可以追溯到一千多年以前。</span>
					</div>
				</a>
			</div>
		</div>
		<div class="footer">
			<div>星巴克官网</div>
			<div class="right">
				<p>隐私政策</p>
				<p>条款和条件</p>
			</div>
		</div>
	</div>
</body>
<script src="../bootstrap/bootstrap.min.js"></script>
<script>
	//封装获取滚动条高度的函数
	function getScrollTop() {
		var scroll_top = 0;
		if (document.documentElement && document.documentElement.scrollTop) {
			scroll_top = document.documentElement.scrollTop;
		} else if (document.body) {
			scroll_top = document.body.scrollTop;
		}
		return scroll_top;
	}
	let header = document.getElementsByTagName('header')[0]
	let schedule = document.getElementById('schedule')
	window.addEventListener('scroll', (event) => {
		var ScrollTop = getScrollTop()
		if (ScrollTop == 0) {
			header.style.position = null
			header.style.top = null
			schedule.style.width = null
		} else {
			header.style.position = 'sticky'
			header.style.top = '0'
			schedule.style.width = ScrollTop / (document.body.scrollHeight - window.innerHeight) * 100 +
				'%'
			schedule.style.left = '0'
		}

	});
</script>

</html>